<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="xiangqing.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="./download%20(2)/font_1609246_yxwc1zlxblm/iconfont.css" />
	</head>
	<body>
		<header>
			<div class="kuo">
				<div class="headz">
					<span class="iconfont icon-xingxing "></span><a class="shou" href="">收藏本站</a>
					<div class="dao">
						<span class="soo1">送货至</span>
						<span class="soo2">上海∨</span>
					</div>
					<ul class="rrr">
						<li>A<a href="">安徽</a></li>
						<li>B<a href="">北京</a></li>
						<li>C<a href="">重庆</a></li>
						<li>G<a href="">广东</a>&nbsp;&nbsp;<a href="">广西</a>&nbsp;&nbsp;<a href="">贵州</a>&nbsp;&nbsp;<a href="">甘肃</a></li>
						<li>F<a href="">福建</a></li>
						<li>H<a href="">河北</a>&nbsp;&nbsp;<a href="">黑龙江</a>&nbsp;&nbsp;<a href="">海南</a>&nbsp;&nbsp;<a href="">湖北</a>&nbsp;&nbsp;<a
							 href="">河南</a></li>
						<li>J<a href="">江苏</a>&nbsp;&nbsp;<a href="">吉林</a>&nbsp;&nbsp;<a href="">江西</a></li>
						<li>L<a href="">辽宁</a></li>
						<li>N<a href="">内蒙古</a>&nbsp;&nbsp;<a href="">宁夏</a></li>
						<li>Q<a href="">青海</a></li>
						<li>S<a href="">上海</a>&nbsp;&nbsp;<a href="">山东</a>&nbsp;&nbsp;<a href="">山西</a>&nbsp;&nbsp;<a href="">四川</a>&nbsp;&nbsp;<a
							 href="">陕西</a></li>
						<li>T<a href="">天津</a></li>
						<li>X<a href="">西藏</a>&nbsp;&nbsp;<a href="">新疆</a></li>
						<li>Y<a href=""></a>云南</li>
						<li>Z<a href=""></a>浙江</li>
					</ul>
				</div>

				<div class="headr">
					<ul>
						<li>你好！<a class="deng" href="">请登录</a>&nbsp;<a class="qq" href="">注册</a></li>
						<li><a class="qq" href="">我的订单</a></li>
						<li id="ssss"><a class="qq" href="">我的1药网∨</a>

						</li>
						<li><a class="qq" href="">帮助中心</a></li>
						<li><a class="qq" href="">在线客服</a></li>
						<li><a class="ww" href="">400-007-0958</a></li>
						<li><span class=" icon-xingxing "></span><a class="qq" href="">APP</a></li>
					</ul>
				</div>
				<ul class="xiala">
					<li><a href="">我的优惠券</a></li>
					<li><a href="">我的收藏夹</a></li>
					<li><a href="">商品评价</a></li>
					<li><a href="">我的私人订制</a></li>
				</ul>
			</div>
		</header>
		<div class="geti">
			<div class="geti1">
				<img class="biaot" src="./img/未标题-1.jpg">
			</div>
			<div class="geti2">
				<div class="xuanze1">
					<input type="text" name="" id="txt" placeholder="ww">
					<button id="btn" type="button"></button>
					<ul class="fu">
						<li><a class="rr" href="">金戈</a></li>
						<li><a class="fu2" href="">汇仁肾宝</a></li>
						<li><a class="fu2" href="">舒筋健腰丸</a></li>
						<li><a class="fu2" href="">洛赛克</a></li>
						<li><a class="fu2" href="">六味地黄丸</a></li>
						<li><a class="fu2" href="">板蓝根</a></li>
						<li><a class="fu2" href="">达克宁</a></li>

					</ul>
				</div>
				<div class="xuanze2">
					<button onclick="myCrat()" id="gou" type="button">
						<span id="gou1" class="iconfont icon-gouwuche "></span>
						<span class="gou2">0</span>
						<span class="gou3">购物车 ></span>
					</button>
				</div>
			</div>
		</div>
		<div class="wode">
			
		</div>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let params = new URLSearchParams(location.search.slice(1))
			let pid = params.get('pid')
			console.log(pid);
			
			 $.ajax({
			            url:'http://jx.xuzhixiang.top/ap/api/detail.php',
			            type:'get',
			            data:{
			                id:pid
			            }
			        }).then(res=>{
						let pobj = res.data
						let html = `
						<div class="xiw">
							<a class="te" href="">所有商品分类</a>
							<ul>
								<li><a class="bi" href="">首页</a></li>
								<li><a class="yao" href="">家庭常备药</a></li>
								<li><a class="yao" href="">乙肝</a></li>
								<li><a class="yi" href="">传统滋补</a></li>
								<li><a class="yao" href="">男性早泄</a></li>
								<li><a class="yao" href="">控制三高</a></li>
								<li><a class="yi" href="">中药抓药</a></li>
								<li><a class="yao" href="">商家店铺</a></li>
								<li><a class="yao" href="">投资者关系</a></li>
								<li><a class="yao" href="">健康回答</a></li>
							</ul>
						
						</div>
						<div class="jiewei">
							<div id="fdj">
								<div class="small">
									<img src="${pobj.pimg}" />
									<div class="mask"></div>
								</div>
						
								<div class="big">
									<img class="big-img" src="${pobj.pimg}" />
								</div>
							</div>
							<div class="jiewei2">
								<span>自营</span><i>${pobj.pname}</i><br>
								<em>${pobj.pdesc}</em><br>
								<div class="hai">
									<p class="ouyuan">价钱</p>
									<p class="sila">￥${pobj.pprice}</p>
								</div>
							    <span class="wuhui">+</span><input type="text" name="" id="txtt" value="1" /><span class="shiwu">-</span><br>
								<button onclick="toCrat(${pobj.pid})" id="jiaru" type="button">加入购物车</button>
							</div>
							<div class="jiewei3">
								<div class="xiaa">
									<p>放心购买</p>
									<span>互联网药品交易资格证：粤C20150007</span>
								</div>
								<div class="xiaaa">
									<img src="img/app_code.jpg">
								</div>
							</div>
						</div>
						`
						
						$('.wode').html(html)
						
					
						
						
						class Fdj{
							constructor(sel) {
							    this.el = document.querySelector(sel)
								
								this.mask = this.el.querySelector('.mask')
								this.small = this.el.querySelector('.small')
								this.big=  this.el.querySelector('.big')
								this.bigImg=  this.el.querySelector('.big-img')
								
								//小mask 的高度/small的高度  = big/bigimg
								
								// let bigImgHeight = big*small/mask
								let bigImgHeight = parseInt(getComputedStyle(this.big).height)*this.small.offsetHeight/parseInt(getComputedStyle(this.mask).height)
								
								console.log(bigImgHeight)
								this.bigImg.style.height = bigImgHeight +'px'
								
								
								//2
								this.el.onmouseenter = ()=>{
									this.mask.style.display = 'block'
									this.big.style.display = 'block'
								}
								this.el.onmouseleave = ()=>{
									this.mask.style.display = 'none'
									this.big.style.display = 'none'
								}
								
								//3  遮罩随着鼠标动
								this.small.onmousemove = (evt)=>{
									let x = evt.pageX - this.el.offsetLeft;
									let y = evt.pageY - this.el.offsetTop;
									
									let maskX = x - this.mask.offsetWidth/2;
									let maskY = y - this.mask.offsetWidth/2;
									
									if(maskX<=0){
										maskX = 0
									}
									if(maskX>=this.small.offsetWidth-this.mask.offsetWidth){
										maskX = this.small.offsetWidth-this.mask.offsetWidth
									}
									
									if(maskY>=this.small.offsetWidth-this.mask.offsetWidth){
										maskY = this.small.offsetWidth-this.mask.offsetWidth
									}
									
									
									if(maskY<=0){
										maskY = 0
									}
									
									this.mask.style.left = maskX +'px'
									this.mask.style.top = maskY +'px'
									
									//遮罩 移动 2  ,大图移动4,方向相反
									this.bigImg.style.left = -maskX*bigImgHeight/this.small.offsetHeight +'px'
									this.bigImg.style.top = -maskY*bigImgHeight/this.small.offsetHeight +'px'
									
									
								}
								
								
								
								
							}
						}
						
						new Fdj('#fdj')
					})
				
			
			
			function toCrat(id){
				console.log(localStorage.getItem('uid'))
				console.log(id)
				$.ajax({
					type:"get",
					url:"http://jx.xuzhixiang.top/ap/api/add-product.php",
					data:{
						uid:localStorage.getItem('uid'),
						pid:id,
						pnum:1,
					}
				}).then(res=>{
					alert('添加成功')
				})
			}
			
			function myCrat(){
				location.href="gouwu.html"
			}
		</script>
	</body>
</html>
